<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>BottomPanel</title>

    <style>
      .btn {
        width: fit-content;
        padding: 5px 8px;
        background: #000;
        color: #fff;
        border-radius: 3px;
      }

      .modal-wrap-bottom-panel {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 99999;
        background-color: rgb(0 0 0 / 60%);
        align-items: flex-end; /* 内部的子元素垂直方向: 居下 */
        justify-content: center;
        touch-action: none;
        display: none;

        .modal-content-bottom-panel-wrap {
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 100%;
          background-color: white;
          padding-bottom: env(safe-area-inset-bottom);
          animation: popup 0.2s;
        }
      }

      .modal-wrap-bottom-panel__open {
        display: flex;
      }

      /* 
					由于父元素【modal-wrap-bottom-panel】 设置了垂直方向底部对齐，
					所以子元素离底部的距离为: 子元素的内容高度

					当子元素设置: position: relative 时
						top: 0; 	则说明: 子元素离底部的距离为: 子元素的内容高度
						top: 10px;则说明: 子元素离底部的距离为: 子元素的内容高度 - 10px  [注意:  是-]
			 */
      @keyframes popup {
        from {
          top: 1000px;
        }

        to {
          top: 0px;
        }
      }

      .test {
        width: 200px;
        height: 150px;
        background-color: #fa0;
        color: #000;
      }
    </style>
  </head>
  <body>
    <div class="btn">按钮</div>
    <div class="modal-wrap-bottom-panel">
      <div class="modal-content-bottom-panel-wrap">
        <div class="test">你的自定义弹框内容</div>
      </div>
    </div>

    <script>
      const btn = document.querySelector('.btn')
      const modal = document.querySelector('.modal-wrap-bottom-panel')
      const mask = document.querySelector('.modal-wrap-bottom-panel')

      btn.addEventListener('click', () => {
        modal.classList.toggle('modal-wrap-bottom-panel__open')
      })

      mask.addEventListener('click', () => {
        modal.classList.remove('modal-wrap-bottom-panel__open')
      })
    </script>
  </body>
</html>
